<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>修改学生信息</title>
    <style>
        form {
            margin: 20px auto;
            width: 500px;
            border: 1px solid #ccc;
            padding: 20px
        }
    </style>
</head>
<body>
 <form method="post" action="../edit/">


    <input type="hidden" name="student_no" value="{{ student.student_no }}"/>
    <table>
        <tr>
            <th>姓名</th>
            <td><input name="student_name" value="{{ student.student_name }}"></td>
        </tr>
        <tr>
            <th>性别</th>
            <td>
                     <select id="mySelect" name="gender" style="width: 166px;height: 24px;">
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
            </td>
        </tr>
        <tr>
            <th>年龄</th>
            <td><input type="number" name="student_age" value="{{ student.student_age }}"/></td>
        </tr>
             <tr>
            <th>出生日期</th>
            <td><input type="date" style="width: 160px;" name="birthday" value="{{ student.birthday }}"/></td>
        </tr>
        <tr>
            <th>体重</th>
            <td><input type="number" name="weight" value="{{ student.weight }}" /></td>
        </tr>
          <tr>
            <th>身高</th>
            <td><input type="number" name="height" value="{{ student.height }}"/></td>
        </tr>
        <tr>
            <th>个人简介</th>
            <td><input type="text" name="introduce" value="{{ student.introduce }}"/></td>
        </tr>
        <tr>
            <th>照片</th>
            <td>
                <input type="file" name="photo"  onchange="fileSelected();" value="{{ student.photo }}">
            </td>
        </tr>
        <tr>
            <th>班级编号</th>
            <td>
                <input type="number" name="student_class"  value="{{ student.student_class }}">
            </td>
        </tr>
        <tr>
            <th>班级名称</th>
            <td>
                <input type="text" name="student_class_name"  value="{{ student.student_class_name }}">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button"  style="background-color:red;margin-left: 80px;margin-top: 10px;" value="提交" onclick="commit()" />
            </td>
             <td colspan="2">
                <input type="button" style="background-color:red;margin-left: -140px;margin-top: 10px;" value="返回" onclick="javascript:history.back(-1);" />
            </td>
        </tr>
    </table>

 </form>
<script>
    function commit () {
           const  request = {}
           request.student_no = $("input[name='student_no']").val()
           request.student_name = $("input[name='student_name']").val()
           request.gender = $("select[name='gender']").val()
           request.student_age = $("input[name='student_age']").val()
           request.birthday = $("input[name='birthday']").val()
           request.weight = $("input[name='weight']").val()
           request.height = $("input[name='height']").val()
           request.introduce = $("input[name='introduce']").val()
           request.photo = $("input[name='photo']").val()
           request.student_class = $("input[name='student_class']").val()
           request.student_class_name = $("input[name='student_class_name']").val()
           console.log(JSON.stringify(request));
           $.ajax({
            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: 'http://localhost:8000/sims/edit/',//url
                contentType:'application/json',
                 //在请求头通过csrf认证，键固
                headers:{'X-CSRFToken': getCookie("csrftoken")},
                data: JSON.stringify(request),
                success: function (data) {
                    console.log(JSON.stringify(data))
                    if(data.code == 200){
                        alert(data.desc)
                        {#跳转到列表#}
                        window.location.href="../";
                    }else {
                        alert(data.desc)
                    }
                },
                error : function(e) {
                    console.log('e',e)

                    alert("添加学生异常！");
                }
            });
    }
      // 为防止CSRF（Cross-site request forgery）跨站请求伪造，发post请求时需要在cookie中创建随机码
    function getCookie(name) {
            var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
            /*
               上面这句话相当于：
            var arr;
            var reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
             */
            if(arr=document.cookie.match(reg))
                return decodeURI(arr[2]);    //ECMAScript v3 已从标准中删除了 unescape() 函数，并反对使用它，
                                            // 因此应该用 decodeURI() 和 decodeURIComponent() 取而代之。
            else
                return null;
    }
</script>
</body>
</html>